<template>
  <div>
    <h2>组合API-父子组件之间数据交互</h2>
    <hr>
    <Son :money='money' @event-send='getMoney'/>
  </div>
</template>
<script>
import Son from './Son.vue'
import { ref, provide } from 'vue'

export default {
  name: 'App',
  components: { Son },
  setup () {
    // 组件之间数据交互：1、父传子props；2、子传父$emit；3、非父子vuex
    const money = ref(100)
    // 从父组件把数据传递到子孙组件
    provide('money', money)
    const getMoneyOfGrandSon = (v) => {
      console.log(v)
    }
    provide('getMoneyOfGrandSon', getMoneyOfGrandSon)
    const getMoney = (v) => {
      console.log(v)
    }
    return { money, getMoney }
  }
}
</script>
